<template>
	<div class="box">
		<div class="title_box">
			<div class="title_box_left">
				<img src="@/assets/home/title-icon.png" alt="">
				<p>新闻资讯</p>
			</div>
		</div>
		<div class="popularize">
			<div v-if="dataList.islist">
				<li class="popularize_item" v-for="(item,index) in dataList.newsList" @click="lookDetale(item.newUuid)">
					<p class="snp1">{{item.newTitle}}</p>
					<span>{{item.createdTime.slice(0,10)}}</span>
				</li>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		getNewByUuid,
		searchNew
	} from "../../api/home.js";
	import {
		reactive,
		onBeforeMount
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		islist:true,
		newContent:'',
		newsList:[]
	})
	onBeforeMount(() => {
		getList()
	})
	const lookDetale = (id) => {
		router.push({
			path:'/newsDetail',
			query:{id:id}
		})
	}
	const getList = () => {
		var data = {
			page: {
				pageSize: 99
			},
			params: {}
			
		}
		// "newContent": "string",
		searchNew(data).then(res=>{
			console.log(res)
			dataList.newsList = res.data.list
		})
	}
</script>

<style lang="scss" scoped>
	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		&_left {
			display: flex;
			align-items: center;
	
			img {
				width: 55px;
			}
	
			p {
				font-size: 34px;
				font-weight: 600;
				color: #11918E;
				margin-left: 10px;
			}
		}
	}
	.box {
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;
		min-height: 430px;
		.popularize_box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
		}
		.popularize{
			margin-top: 30px;
			width: 100%;
			// height: 358px;
			background: #FFFFFF;
			border-radius: 10px 10px 10px 10px;
			opacity: 1;
			border: 1px solid rgba(17,145,142,0.1);
			padding: 15px;
			.popularize_item{
				display: flex;
				justify-content: space-between;
				padding: 15px 0;
				p{
					width: 950px;
					font-size: 16px;
					font-weight: 400;
					color: #333333;
				}
				span{
					font-size: 16px;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
	
</style>